<template>
  <el-form ref="form" :model="formData" :label-width="formLabel" >
    <el-form-item v-for="item in formItem" :key="item.prop" :label="item.label" :prop="item.prop" :rules="item.rules">
      <p v-if="item.type === 'Text'">{{item.content}}</p>
      <el-input v-if="item.type ==='Input'" v-model.trim="formData[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" :disabled="item.disabled"></el-input>
      <el-input-number v-if="item.type === 'InputNumber'" v-model="formData[item.prop]" controls-position="right" :min="item.min || 0" :max="item.max || 10000"></el-input-number>
      <el-input type="textarea" :rows="5" v-if="item.type ==='Textarea'" v-model.trim="formData[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" :disabled="item.disabled"></el-input>
      <el-select filterable v-if="item.type ==='Select'" v-model.trim="formData[item.prop]" :placeholder="item.placeholder" :style="{width:item.width}" :disabled="item.disabled">
        <el-option v-for="i in item.options" :key="i.value || i[item.select_value]" :value="i.value || i[item.select_value]" :label="item.value || i[item.select_label]" ></el-option>
      </el-select>
      <el-radio-group v-if="item.type === 'Disabled'" v-model="formData[item.prop]">
        <el-radio v-for="i in radio_disabled" :label="i.value" :key="i.value">{{i.label}}</el-radio>
      </el-radio-group>
      <slot v-if="item.type === 'Slot'" :name="item.slotName" />
      <el-radio-group v-if="item.type === 'Radio'" v-model="formData[item.prop]">
        <el-radio v-for="i in item.options" :label="i.value" :key="i.value">{{i.label}}</el-radio>
      </el-radio-group>
      <template v-if="item.type === 'editor'" >
        <editor :value="formData[item.prop]" :content.sync="formData[item.prop]" ref="editor" />
      </template>
      <template v-if="item.type === 'Upload'" >
        <upload :imgUrl="formData[item.prop]" :value.sync="formData[item.prop]" />
      </template>
    </el-form-item>
    <el-form-item>
      <el-button v-for="item in fromHandler" :key="item.key" :type="item.type" @click="item.handler && item.handler()" >{{item.label}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import CityArea from "@/components/common/cityArea"
import Editor from "@/components/common/editor"
import Upload from "@/components/upload"

export default {
  name: "Form",
  props: {
    formItem:{type:Array,default:()=>[]},
    fromHandler:{type:Array,default:()=>[]},
    formData:{type:Object,default:()=>[]},
    formLabel:{type:String,default:"120px"}
  },
  components: {
    CityArea,Editor,Upload
  },
  watch: {
    formItem: {
      handler(newValue) {
        this.initFormData();
      },
      immediate: true
    }
  },
  data() {
    return {
      radio_disabled: this.$store.state.config.radio_disabled,
      typeMes: {
        "Input": "请输入",
        "InputNumber":"请输入",
        "Radio": "请选择",
        "Select": "请选择",
        "Disabled":"请选择",
        "Upload":"请上传"
      }
    }
  },
  methods: {
    initFormData() {
      this.formItem.forEach((item) => {
        if(item.required) {
          this.rules(item);
        }
        if(item.validator) {
          item.rules = item.validator;
        }
      })
    },
    rules(item) {
      if(item.required) { // 是否存在必填规则
        const requiredRules = [{required:true,message: item.requiredMes|| `${this.typeMes[item.type]}${item.label}` ,trigger:"blur"}];
        if(item.rules && item.rules.length > 0) {
          // 有多个规则，就合并成一个
          item.rules = requiredRules.concat(item.rules);
        } else {
          item.rules = requiredRules;
        }
      }    
    },
    resetForm(){
      this.$refs.form.resetFields();
      // 清除富文本内容
      if(this.$refs.wangeditor) { this.wangeditorClear = !this.wangeditorClear; }
    },
  }
}
</script>

<style lang="less" scoped>

</style>